<template>

  <el-container>
    <el-aside>
      <div class="top-logo">
        <h3>Brand Logo</h3>
      </div>
      <el-scrollbar>
        <el-menu :default-active="2">
          <el-sub-menu index="1">
            <template #title>
          <span>
            菜单1
          </span>
            </template>
            <el-menu-item>
              菜单1-1
            </el-menu-item>
            <el-menu-item>
              菜单1-2
            </el-menu-item>
            <el-menu-item>
              菜单1-3
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
          <span>
            菜单2
          </span>
            </template>
            <el-menu-item>
              菜单2-1
            </el-menu-item>
            <el-menu-item>
              菜单2-2
            </el-menu-item>
            <el-menu-item>
              菜单2-3
            </el-menu-item>
          </el-sub-menu>
        </el-menu>

      </el-scrollbar>


    </el-aside>
    <el-container>
      <el-header>
        <el-row class="header-row">
          <el-col :span="1">
            <el-icon location />
          </el-col>

          <el-col :span="19">

          </el-col>
          <el-col :span="2">
            <span>通知区域</span>
          </el-col>

          <el-col class="header-user-info" :span="2">
            <span>用户信息</span>
          </el-col>

        </el-row>
      </el-header>
      <el-main>
        <div class="mt-1">
          {{msg}}
          <p>
            counter: {{counter.count}}
          </p>
          <el-button type="primary" @click="onCounterClicked">计数</el-button>
        </div>
      </el-main>
      <el-footer>
        Copy Right
      </el-footer>
    </el-container>
  </el-container>


</template>


<script setup>

import counterStore from "@/store/CounterStore.js";

const counter = counterStore()

let onCounterClicked = () => {
  counter.increment()
}

</script>

<style scoped>

.top-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background-color: #2c3e50;
  color: white;
}

.el-aside {
  width: 200px;
  height: 800px;
}


.el-menu {
  height: 100%;
  background-color: #909090;
}

.el-header {
  display: flex;
  height: 50px;
  background-color: #909090;
  color: white;
}

.el-footer {
  display: flex;
  align-items: center;
  background-color: #313131;
  color: white;
  height: 50px;
}

.header-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.header-notify-info {
  display: flex;
  justify-content: end;
  align-items: center;
}
.header-user-info {
  background-color: #909090;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.el-main {
  background-color: #e0e0e0;
}
</style>
